<!--
 * @Author: windys
 * @Description: 图表
 * @Date: 2021-12-10 17:20:18
-->
<template>
    <div class="dashboard_page">
        <a-row>
            <!-- <h1>{{ status }}</h1> -->
        </a-row>
        <a-row>
            <a-col :xs="24" :sm="12" :lg="24" :xl="6">
                <Card>
                    <template #icon>
                        <i class="iconfont icon-gouwu" style="font-size:40px;color:#40c9c6 ;"></i>
                    </template>
                </Card>
            </a-col>

            <a-col :xs="24" :sm="12" :lg="24" :xl="6">
                <Card>
                    <template #icon>
                        <i class="iconfont icon-zan1" style="font-size:40px;color:#36a3f7 ;"></i>
                    </template>
                </Card>
            </a-col>

            <a-col :xs="24" :sm="12" :lg="24" :xl="6">
                <Card>
                    <template #icon>
                        <i
                            class="iconfont icon-fenxiang"
                            style="font-size:40px;color:rgb(233, 71, 98) ;"
                        ></i>
                    </template>
                </Card>
            </a-col>
            <a-col :xs="24" :sm="12" :lg="24" :xl="6">
                <Card>
                    <template #icon>
                        <i class="iconfont icon-guanzhu" style="font-size:40px;color:#f37b1a ;"></i>
                    </template>
                </Card>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="24">
                <LineChart ref="LineChart"></LineChart>
            </a-col>
        </a-row>

        <a-row>
            <a-col :xs="24" :sm="12" :lg="8" :xl="8">
                <PieChart></PieChart>
            </a-col>
            <a-col :xs="24" :sm="12" :lg="8" :xl="8">
                <HisChart></HisChart>
            </a-col>
            <a-col :xs="24" :sm="12" :lg="8" :xl="8">
                <GaugeChart></GaugeChart>
            </a-col>
        </a-row>
    </div>
</template>



<script >
import { defineComponent, defineAsyncComponent, computed, watch, ref, onMounted } from 'vue'
import Card from './compoentns/card.vue'
import LineChart from './compoentns/lineChart.vue'
import HisChart from './compoentns/hisChart.vue'
import PieChart from './compoentns/pieChart.vue'
import GaugeChart from './compoentns/gaugeChart.vue'
import { useStore } from 'vuex'
import { nextTick } from 'process'
export default defineComponent({
    components: {
        Card,
        LineChart,
        HisChart,
        PieChart,
        GaugeChart
    },
    setup() {
        const LineChart = ref()
        const status = ref(false)
        const store = useStore()
        status.value = computed(() => store.state.hidenSilde)

        watch(status.value, (val) => {
            nextTick(() => {

            })
        })
        return {
            status,
            LineChart
        }
    },
})
</script>

